<template lang="html">
  <div class="edit">
    <v-toolbar absolute>
      <v-btn icon @click="goback">
        <v-icon>fa-arrow-left</v-icon>
      </v-btn>

      <v-toolbar-title v-html="title"></v-toolbar-title>

      <v-spacer></v-spacer>

      <a v-html="addText" @click="goback"></a>
    </v-toolbar>

    <v-container class="v-edit" :style="{height: height}">
      <v-layout wrap>
        <v-flex xs12>
          <v-text-field
            label="设备编号"
            append-icon="fa-qrcode"
            placeholder="请输入"
          ></v-text-field>
          <v-text-field
            label="设备地址"
            append-icon="fa-map-marker-alt"
            placeholder="请输入"
          ></v-text-field>
          <v-textarea
          name="input-7-1"
          label="所属片区"
          value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
        ></v-textarea>
        <v-textarea
          name="input-7-1"
          label="责任人"
          value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
        ></v-textarea>
        </v-flex>
      </v-layout>
    </v-container>

    <v-tabs
      fixed-tabs
      icons-and-text>
      <v-tabs-slider color="primary"></v-tabs-slider>
      <router-link class="tab-link" v-for="tab in tabsButton" :to="{ path: tab.url, params: {} }">
        <v-tab color="primary">
          {{tab.text}}
          <v-icon>{{tab.icon}}</v-icon>
        </v-tab>
      </router-link>
    </v-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      height: "0px",
      title: "表单",
      addText: "取消",
      tabsButton: [
        {text: "主页", icon: "fa-home", url: "/homepage"},
        {text: "个人中心", icon: "fa-user", url: "/profile"}
      ],
    }
  },
  mounted() {
    this.resize()
  },
  methods: {
    resize() {
      let windowHeight = window.getComputedStyle(document.querySelector('body')).height
      this.height = Number(windowHeight.replace('px', '')) - 56 - 56 + 'px'
    },
    goback() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss">
.edit {
  height: 100%;
  position: relative;

  .v-tabs {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    .v-tabs__wrapper {
      box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);

      .tab-link {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 50%;
      }
    }
  }

  .v-edit {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    overflow: auto;

    &::-webkit-scrollbar {
      width: 0 !important;
    }

    span {
      color: rgb(199, 199, 204) !important;
    }

    i {
      font-size: 14px;
      margin-left: 10px;
      color: rgb(199, 199, 204) !important;
    }
  }
}
</style>
